<template>
  <div class="relative">
    <!--分支名称  -->
    <div class="text-sm w-full mb-1 flex items-center"
      ><div class="flex-1 text-right"> {{ casteTitle }}</div>
      <Popover title="Title" placement="right" trigger="click">
        <template #content>
          <div class="p-2">Content</div>
        </template>
        <Handle
          :id="item.id + '-handle'"
          type="source"
          :position="Position.Right"
          :style="{
            height: '10px',
            width: '10px',
            background: getThemeColor,
            top: '10px',
            right: '-9px',
          }"
        />
      </Popover>
    </div>
    <div class="flex flex-row items-center mb-4" ref="conditionItem">
      <!-- 条件关系 线 -->
      <div
        class="conidtion-relation w-4"
        :style="{ height: conditionItem?.offsetHeight + 'px' }"
        v-if="item.conditions && item.conditions.length > 1"
      >
        <VerticalDivider>{{
          item.conidtionsRelationship == 1 ? '且' : item.conidtionsRelationship == 2 ? '或' : null
        }}</VerticalDivider>
      </div>
      <!-- 条件集合  -->
      <div class="flex-1 ml-2">
        <div
          class="flex items-center justify-between rounded p-1 bg-gray-200"
          v-for="(d, inx) in item.conditions"
          :style="{ marginBottom: inx < item.conditions.length - 1 ? '8px' : '0' }"
          :key="inx"
        >
          <div class="flex items-center text-sm justify-between w-full">
            <div class="p-1 rounded bg-white"
              >{{ d.quoteType }}：<span class="text-blue-400">{{ d.quoteValue }}</span></div
            >
            <span class="ml-1 mr-1">{{ d.condition }}</span>
            <div :class="['p-1', 'rounded', d.compareType == 2 ? 'bg-white' : 'bg-transparent']">
              {{ d.compareKey }}：<span :class="d.compareType == 2 ? 'text-blue-400' : null">{{
                d.compareValue
              }}</span></div
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Handle, Position } from '@vue-flow/core'
  import VerticalDivider from '../components/vertical-divider.vue'
  import { useRootSetting } from '/@/hooks/setting/useRootSetting'
  const { getThemeColor } = useRootSetting()
  const props = defineProps<{
    casteTitle: string
    item: {
      id: number
      conidtionsRelationship: 1 | 2 // 1: and 2: or
      conditions: any[]
    }
  }>()
  const conditionItem = ref()
</script>

<style scoped lang="less"></style>
